<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { View, Check, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'


interface ScrapRequest {
  id: number
  serialNumber: string
  applicantId: number
  departmentName: string
  reason: string
  scrapType: string
  scrapFileUrl: string
  status: string
  submitTime: string
  updateTime: string
}

interface ScrapDisposal {
  id: number
  scrapRequestId: number
  disposalMethod: string
  income: number
  disposalTime: string
  operatorId: number
  remarks: string
}

interface ScrapRequestListResponse {
  current: number
  total: number
  pages: number
  size: number
  records: ScrapRequest[]
}

interface ScrapDisposalListResponse {
  current: number
  total: number
  pages: number
  size: number
  records: ScrapDisposal[]
}

const statusTypeMap = {
  '待审批': '待审批',
  '已通过': '已通过',
  '已驳回': '已驳回'
} as const

const scrapTypeMap = {
  '使用年限到期': '使用年限到期',
  '损坏无法修复': '损坏无法修复',
  '维修成本过高': '维修成本过高'
} as const

const disposalMethodMap = {
  '变卖': '变卖',
  '丢弃': '丢弃',
  '捐赠': '捐赠',
  '回收': '回收'
} as const

const getStatusTypeLabel = (value: string): string => {
  return statusTypeMap[value as keyof typeof statusTypeMap] || '未知状态'
}

const getScrapTypeLabel = (value: string): string => {
  return scrapTypeMap[value as keyof typeof scrapTypeMap] || '未知类型'
}

const getDisposalMethodLabel = (value: string): string => {
  return disposalMethodMap[value as keyof typeof disposalMethodMap] || '未知方式'
}

const scrapApi = {
  getApprovedRequests: (params: any) => {
    return request<ScrapRequestListResponse>({
      method: 'GET',
      url: '/scrap/list',
      params: { 
        ...params,
        status: '已通过'
      }
    })
  },

  getDisposalHistoryByRequest: (requestId: number) => {
    return request<ScrapDisposalListResponse>({
      method: 'GET',
      url: `/scrap/disposal/history/${requestId}`
    })
  },

  getDisposalList: (params: any) => {
    return request<ScrapDisposalListResponse>({
      method: 'GET',
      url: '/scrap/disposal/list',
      params: { ...params }
    })
  },

  submitDisposal: (data: any) => {
    return request({
      method: 'POST',
      url: '/scrap/disposal',
      data: {
        ...data,
        operatorId: 1
      }
    })
  },
  
  getSerialSuggestions: (keyword: string) => request<string[]>({
    method: 'GET',
    url: '/device/serial/suggestions',
    params: { keyword }
  })
}

const approvedRequests = ref<ScrapRequest[]>([])
const disposalList = ref<ScrapDisposal[]>([])
const disposalHistory = ref<ScrapDisposal[]>([])
const disposalForm = ref({
  scrapRequestId: null as number | null,
  disposalMethod: '变卖' as string,
  income: null as number | null,
  remarks: '' as string
})

const searchMessage = ref({
  applicantId: null as number | null,
  serialNumber: null as string | null,
  scrapType: null as string | null
})

const disposalListSearchParams = ref({
  scrapRequestId: null as number | null,
  disposalMethod: null as string | null,
  operatorId: null as number | null
})

const activeTab = ref('disposal')
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const disposalListPageNum = ref(1)
const disposalListPageSize = ref(7)
const disposalListTotal = ref(0)
const serialNumberOptions = ref<string[]>([])
const loadingSerialNumbers = ref(false)

const showDisposalDialog = ref(false)
const showHistoryDialog = ref(false)
const currentRequest = ref<ScrapRequest | null>(null)

const requestDisposalStatus = ref<Record<number, boolean>>({})

const downloadFile = (url: string) => {
  if (!url) {
    ElMessage.warning('没有可下载的附件')
    return
  }
  
  const link = document.createElement('a')
  link.href = url
  link.target = '_blank'
  link.download = url.split('/').pop() || 'attachment'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const fetchSerialSuggestions = async (query: string) => {
  if (query) {
    loadingSerialNumbers.value = true
    try {
      const res = await scrapApi.getSerialSuggestions(query)
      serialNumberOptions.value = res.data
    } catch {
      ElMessage.error('获取设备序列号失败')
    } finally {
      loadingSerialNumbers.value = false
    }
  } else {
    serialNumberOptions.value = []
  }
}

onMounted(() => {
  getApprovedRequests()
})

const getApprovedRequests = async () => {
  try {
  const params: {
    page: number;
    size: number;
    applicantId?: string | number; // Assuming applicantId can be a string or number, and is optional
    serialNumber?: string;       // Assuming serialNumber is a string and is optional
    type?: string;               // Assuming type is a string and is optional
    [key: string]: any;          // Allows for any other dynamic properties
  } = {
    page: pageNum.value,
    size: pageSize.value,
    applicantId: searchMessage.value.applicantId!,
    serialNumber: searchMessage.value.serialNumber!,
    type: searchMessage.value.scrapType!,
  };

    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })

    const response = await scrapApi.getApprovedRequests(params)
    approvedRequests.value = response.data.records
    total.value = response.data.total
    
    await checkDisposalStatusForRequests()
  } catch (error) {
    ElMessage.error('获取已通过申请列表失败')
  }
}

const checkDisposalStatusForRequests = async () => {
  for (const request of approvedRequests.value) {
    try {
      const response = await scrapApi.getDisposalHistoryByRequest(request.id)
      requestDisposalStatus.value[request.id] = (response as any).data.length > 0
    } catch (error) {
      requestDisposalStatus.value[request.id] = false
    }
  }
}

const getDisposalList = async () => {
  try {
const params: {
  page: number;
  size: number;
  scrapRequestId?: string | number; // Assuming scrapRequestId can be a string or number, and is optional
  disposalMethod?: string;          // Assuming disposalMethod is a string and is optional
  operatorId?: string | number;     // Assuming operatorId can be a string or number, and is optional
  [key: string]: any;               // Allows for any other dynamic properties
} = {
  page: disposalListPageNum.value,
  size: disposalListPageSize.value,
  scrapRequestId: disposalListSearchParams.value.scrapRequestId!,
  disposalMethod: disposalListSearchParams.value.disposalMethod!,
  operatorId: disposalListSearchParams.value.operatorId!,
};


    Object.keys(params).forEach(key => {
      if (params[key] === null || params[key] === undefined || params[key] === '') {
        delete params[key]
      }
    })

    const response = await scrapApi.getDisposalList(params)
    disposalList.value = response.data.records
    disposalListTotal.value = response.data.total
  } catch (error) {
    ElMessage.error('获取处理记录列表失败')
  }
}

const getDisposalHistory = async (requestId: number) => {
  try {
    const response = await scrapApi.getDisposalHistoryByRequest(requestId)
    disposalHistory.value = (response as any).data
    showHistoryDialog.value = true
  } catch (error) {
    ElMessage.error('获取处理历史失败')
  }
}

const handleDispose = (request: ScrapRequest) => {
  currentRequest.value = request
  disposalForm.value = {
    scrapRequestId: request.id,
    disposalMethod: '变卖',
    income: null,
    remarks: ''
  }
  showDisposalDialog.value = true
}

const submitDisposal = async () => {
  if (!disposalForm.value.scrapRequestId) {
    ElMessage.warning('请选择要处理的申请')
    return
  }

  if (!disposalForm.value.disposalMethod) {
    ElMessage.warning('请选择处理方式')
    return
  }

  try {
    await scrapApi.submitDisposal(disposalForm.value)
    ElMessage.success('报废处理完成')
    showDisposalDialog.value = false
    
    requestDisposalStatus.value[disposalForm.value.scrapRequestId] = true
    getApprovedRequests()
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '报废处理失败')
  }
}

const search = () => {
  pageNum.value = 1
  getApprovedRequests()
}

const searchDisposalList = () => {
  disposalListPageNum.value = 1
  getDisposalList()
}

const resetDisposalListSearch = () => {
  disposalListSearchParams.value = {
    scrapRequestId: null,
    disposalMethod: null,
    operatorId: null
  }
  disposalListPageNum.value = 1
  getDisposalList()
}

const searchWithNoCondition = () => {
  searchMessage.value = {
    applicantId: null,
    serialNumber: null,
    scrapType: null
  }
  pageNum.value = 1
  getApprovedRequests()
}

const onSizeChange = (size: number) => {
  pageSize.value = size
  getApprovedRequests()
}

const onCurrentChange = (num: number) => {
  pageNum.value = num
  getApprovedRequests()
}

const onDisposalListSizeChange = (size: number) => {
  disposalListPageSize.value = size
  getDisposalList()
}

const onDisposalListCurrentChange = (num: number) => {
  disposalListPageNum.value = num
  getDisposalList()
}

const handleTabChange = (tab: string) => {
  if (tab === 'history') {
    getDisposalList()
  } else {
    getApprovedRequests()
  }
}
const isImageFile = (url: string): boolean => {
  return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url)
}
</script>

<template>
  <!-- <div class="maintenance-wrapper"> -->
    <el-card class="card-box">
      <!-- <template #header> -->
        <div class="header">
          <h2>报废处理管理</h2>
        </div>
      <!-- </template> -->

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="报废处理" name="disposal">
          <el-form inline class="filter-bar">
            <el-form-item label="设备ID:" class="filter-item">
              <el-select
                v-model="searchMessage.serialNumber"
                filterable remote clearable reserve-keyword
                placeholder="请输入设备ID"
                :remote-method="fetchSerialSuggestions"
                :loading="loadingSerialNumbers"
              >
                <el-option
                  v-for="item in serialNumberOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请人ID:" class="filter-item">
              <el-input
                v-model.number="searchMessage.applicantId"
                placeholder="请输入申请人ID"
                type="number"
                clearable
              />
            </el-form-item>
            <el-form-item label="报废类型:" class="filter-item">
              <el-select
                v-model="searchMessage.scrapType"
                placeholder="请选择报废类型"
                clearable
              >
                <el-option
                  v-for="item in Object.values(scrapTypeMap)"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="filter-item action-buttons">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="searchWithNoCondition">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="responsive-table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>设备ID</th>
                  <th>申请人ID</th>
                  <th>部门ID</th>
                  <th>报废类型</th>
                  <th>报废原因</th>
                  <th>附件</th>
                  <th>状态</th>
                  <th>处理情况</th>
                  <th>提交时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in approvedRequests" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.serialNumber }}</td>
                  <td>{{ item.applicantId }}</td>
                  <td>{{ item.departmentName }}</td>
                  <td>{{ getScrapTypeLabel(item.scrapType) }}</td>
                  <td class="truncate">{{ item.reason }}</td>
                  <td>
  <template v-if="item.scrapFileUrl">
    <template v-if="isImageFile(item.scrapFileUrl)">
      <el-popover
        placement="left"
        trigger="hover"
        :width="325"
        popper-class="image-popover"
      >
        <template #reference>
          <img
            :src="item.scrapFileUrl"
            class="thumbnail-img"
            alt="缩略图"
            @click="downloadFile(item.scrapFileUrl)"
          />
        </template>
        <img :src="item.scrapFileUrl" class="preview-img" alt="大图预览" />
      </el-popover>
      <a
        :href="item.scrapFileUrl"
        :download="item.scrapFileUrl.split('/').pop()"
        class="thumbnail-download"
        title="点击下载"
      />
    </template>
    <el-button
      v-else
      :icon="Download"
      type="primary"
      link
      @click="downloadFile(item.scrapFileUrl)"
    >
      下载附件
    </el-button>
  </template>
  <span v-else class="no-attachment">无附件</span>
</td>

                  <td>
                    <el-tag type="success">
                      {{ getStatusTypeLabel(item.status) }}
                    </el-tag>
                  </td>
                  <td>
                    <el-tag :type="requestDisposalStatus[item.id] ? 'success' : 'warning'">
                      {{ requestDisposalStatus[item.id] ? '已处理' : '未处理' }}
                    </el-tag>
                  </td>
                  <td>{{ item.submitTime }}</td>
                  <td>
                    <div class="action-btns">
                      <el-button
                        :icon="View"
                        circle
                        plain
                        size="small"
                        type="info"
                        @click="getDisposalHistory(item.id)"
                        :disabled="!requestDisposalStatus[item.id]"
                      />
                      <el-button
                        :icon="Check"
                        circle
                        plain
                        size="small"
                        type="primary"
                        @click="handleDispose(item)"
                        :disabled="requestDisposalStatus[item.id]"
                      />
                    </div>
                  </td>
                </tr>
                <tr v-if="approvedRequests.length === 0">
                  <td colspan="11" class="text-center py-4">
                    <el-empty description="暂无已通过的报废申请" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 7, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              background
              :total="total"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="处理历史" name="history">
          <el-form inline class="filter-bar">
            <el-form-item label="申请ID:" class="filter-item">
              <el-input-number
                v-model="disposalListSearchParams.scrapRequestId"
                placeholder="请输入申请ID"
                :min="1"
                :controls="false"
                clearable
              />
            </el-form-item>
            
            <el-form-item label="处理方式:" class="filter-item">
              <el-select
                v-model="disposalListSearchParams.disposalMethod"
                placeholder="请选择处理方式"
                clearable
              >
                <el-option
                  v-for="item in Object.values(disposalMethodMap)"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="操作人ID:" class="filter-item">
              <el-input-number
                v-model="disposalListSearchParams.operatorId"
                placeholder="请输入操作人ID"
                :min="1"
                :controls="false"
                clearable
              />
            </el-form-item>
            
            <el-form-item class="filter-item action-buttons">
              <el-button type="primary" @click="searchDisposalList">搜索</el-button>
              <el-button @click="resetDisposalListSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="responsive-table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>处理ID</th>
                  <th>申请ID</th>
                  <th>处理方式</th>
                  <th>收入(元)</th>
                  <th>操作人ID</th>
                  <th>处理时间</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in disposalList" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.scrapRequestId }}</td>
                  <td>{{ getDisposalMethodLabel(item.disposalMethod) }}</td>
                  <td>{{ item.income }}</td>
                  <td>{{ item.operatorId }}</td>
                  <td>{{ item.disposalTime }}</td>
                  <td class="truncate">{{ item.remarks }}</td>
                </tr>
                <tr v-if="disposalList.length === 0">
                  <td colspan="7" class="text-center py-4">
                    <el-empty description="暂无处理记录" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="disposalListPageNum"
              v-model:page-size="disposalListPageSize"
              :page-sizes="[3, 5, 7, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              background
              :total="disposalListTotal"
              @size-change="onDisposalListSizeChange"
              @current-change="onDisposalListCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog 
        v-model="showHistoryDialog" 
        title="报废处理历史详情" 
        width="80%"
        top="5vh"
      >
        <div class="responsive-table-container">
          <table class="custom-table">
            <thead>
              <tr>
                <th>处理ID</th>
                <th>申请ID</th>
                <th>处理方式</th>
                <th>收入(元)</th>
                <th>操作人ID</th>
                <th>处理时间</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in disposalHistory" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.scrapRequestId }}</td>
                <td>{{ getDisposalMethodLabel(item.disposalMethod) }}</td>
                <td>{{ item.income }}</td>
                <td>{{ item.operatorId }}</td>
                <td>{{ item.disposalTime }}</td>
                <td class="truncate">{{ item.remarks }}</td>
              </tr>
              <tr v-if="disposalHistory.length === 0">
                <td colspan="7" class="text-center py-4">
                  <el-empty description="暂无处理历史记录" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-dialog>

      <el-dialog 
        v-model="showDisposalDialog" 
        :title="`处理报废申请 #${disposalForm.scrapRequestId}`" 
        width="50%"
      >
        <el-form :model="disposalForm" label-width="120px" class="drawer-form">
          <el-form-item label="申请ID">
            <el-input :value="disposalForm.scrapRequestId" disabled />
          </el-form-item>
          <el-form-item label="设备ID">
            <el-input :value="currentRequest?.serialNumber" disabled />
          </el-form-item>
          <el-form-item label="报废类型">
            <el-input :value="currentRequest?.scrapType" disabled />
          </el-form-item>
          <el-form-item label="报废原因">
            <el-input :value="currentRequest?.reason" disabled type="textarea" :rows="2" />
          </el-form-item>
          <el-form-item label="附件">
            <template v-if="currentRequest?.scrapFileUrl">
  <template v-if="isImageFile(currentRequest.scrapFileUrl)">
    <el-popover
      placement="left"
      trigger="hover"
      :width="325"
      popper-class="image-popover"
    >
      <template #reference>
        <img
          :src="currentRequest.scrapFileUrl"
          class="thumbnail-img"
          alt="缩略图"
          @click.stop="downloadFile(currentRequest.scrapFileUrl)"
          style="cursor: pointer;"
        />
      </template>
      <img :src="currentRequest.scrapFileUrl" class="preview-img" alt="大图预览" />
    </el-popover>
  </template>
  <template v-else>
    <el-button
      type="primary"
      icon="Download"
      @click="downloadFile(currentRequest.scrapFileUrl)"
    >
      点击下载
    </el-button>
  </template>
</template>
<span v-else class="no-attachment">无附件</span>
          </el-form-item>
          <el-form-item label="处理方式" required>
            <el-select v-model="disposalForm.disposalMethod" placeholder="请选择处理方式">
              <el-option
                v-for="item in Object.values(disposalMethodMap)"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item 
            label="收入(元)" 
            v-if="disposalForm.disposalMethod === '变卖' || disposalForm.disposalMethod === '回收'"
            required
          >
            <el-input-number 
              v-model="disposalForm.income" 
              :precision="2" 
              :min="0" 
              :controls="false"
              placeholder="请输入收入金额"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="disposalForm.remarks"
              type="textarea"
              :rows="3"
              placeholder="请输入处理备注信息"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitDisposal">提交</el-button>
            <el-button @click="showDisposalDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  <!-- </div> -->
</template>

<style lang="scss" scoped>
.maintenance-wrapper {
  min-height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #2c3e50;
}

.card-box {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.header {
  padding: 0.8rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6eaf0;
  background-color: #f7f9fc;
  
  h2 {
    font-weight: 600;
    font-size: 1.4rem;
    color: #333;
    user-select: none;
    margin: 0;
  }
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  align-items: center;
  background-color: #f7f9fc;
}

.filter-item {
  margin-bottom: 0 !important;
  flex: 1;
  min-width: 200px;
}

.action-buttons {
  flex: none;
  margin-left: auto;
}

.responsive-table-container {
  overflow-x: auto;
  padding: 0.8rem;
}

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 0.9rem;

  thead tr {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
  }

  th, td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
  }

  tbody tr {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #f4f9ff;
    }
  }

  .truncate {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .action-btns {
    display: flex;
    gap: 0.4rem;

    .el-button {
      padding: 0;
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
  }

  .no-attachment {
    color: #a9abb0;
    font-style: italic;
    font-size: 0.85rem;
  }
}

.pagination-container {
  padding: 0.8rem;
  display: flex;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.drawer-form {
  .el-form-item {
    margin-bottom: 1rem;

    label {
      font-weight: 500;
      color: #606266;
    }
  }
}

@media (max-width: 768px) {
  .filter-item {
    min-width: 100%;
  }
  
  .action-buttons {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
.attachment-thumbnail {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

.thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}
.thumbnail-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  margin-right: 4px;
  vertical-align: middle;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}

.thumbnail-download {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}
.thumbnail-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #ddd;
}

.image-popover {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.preview-img {
  width: 300px; // 放大图片
  height: auto;
  max-height: 400px;
  display: block;
  object-fit: contain;
  border: none;
  border-radius: 0;
  background: transparent;
}

.thumbnail-download {
  display: none; // 你也可以用按钮代替
}

</style>